<template>
  <view class="container">
    <view class="form">
      <!-- 原密码 -->
      <view class="form-item">
        <text class="label">原密码</text>
        <input 
          type="password" 
          v-model="form.oldPassword"
          placeholder="请输入原密码"
          maxlength="20"
        />
      </view>
      
      <!-- 新密码 -->
      <view class="form-item">
        <text class="label">新密码</text>
        <input 
          type="password" 
          v-model="form.newPassword"
          placeholder="请输入新密码"
          maxlength="20"
        />
      </view>
      
      <!-- 确认密码 -->
      <view class="form-item">
        <text class="label">确认密码</text>
        <input 
          type="password" 
          v-model="form.confirmPassword"
          placeholder="请再次输入新密码"
          maxlength="20"
        />
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn" @tap="handleSubmit">
      <text>确认修改</text>
    </view>
  </view>
</template>

<script>
import { userApi } from '@/api/index'
import { showToast } from '@/utils/common'

export default {
  data() {
    return {
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    // 表单验证
    validate() {
      if (!this.form.oldPassword) {
        showToast('请输入原密码')
        return false
      }
      if (!this.form.newPassword) {
        showToast('请输入新密码')
        return false
      }
      if (this.form.newPassword.length < 6) {
        showToast('新密码不能少于6位')
        return false
      }
      if (this.form.newPassword !== this.form.confirmPassword) {
        showToast('两次输入的密码不一致')
        return false
      }
      return true
    },
    
    // 提交表单
    async handleSubmit() {
      if (!this.validate()) return
      
      try {
        await userApi.updatePassword({
          oldPassword: this.form.oldPassword,
          newPassword: this.form.newPassword
        })
        showToast('密码修改成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        showToast('密码修改失败')
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
}

.form {
  background: #fff;
  border-radius: 12rpx;
  padding: 0 30rpx;
  
  .form-item {
    display: flex;
    align-items: center;
    height: 100rpx;
    border-bottom: 1rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .label {
      width: 140rpx;
      font-size: 28rpx;
      color: #333;
    }
    
    input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
  }
}

.submit-btn {
  margin-top: 40rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: #ff0000;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style> 